{% extends 'base.html' %}
{% load static %}
{% block title %}用户管理 - 角色权限管理{% endblock %}
{% block content %}
<!-- 内容标题栏 -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h1 class="m-0 text-dark">用户职位管理</h1>
            </div><!-- /.col -->
            <div class="col-sm-12">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">首页</a></li>
                    <li class="breadcrumb-item active">职位管理</li>
                    <li class="breadcrumb-item active"><a href="">用户角色职位管理</a></li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /内容标题栏 -->

<section class="content">
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-7">
            <div class="card card-secondary card-outline">
                <div class="card-header">
                    <h3 class="card-title">职位管理</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" style="color: #007bff;">职位管理</label>
                                <div class="col-sm-4">
                                    <input class="form-control" id="new_position">
                                </div>
                                <div class="col-sm-4">
                                    <select class="form-control" id="position_role">
                                        <option disabled selected>请选择职位类型</option>
                                        {% for j in role_data %}
                                            <option value="{{ j.0 }}">{{ j.1 }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <button id="role_submit" onclick="addNewRole('add','')" class="btn btn-success">新增</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table table-striped">
                                    <thead>
                                    <tr style="text-align: center;">
                                        <th style="width: 60px;">序号</th>
                                        <th>职位名称</th>
                                        <th>职位分类</th>
                                        <th style="text-align: right;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        {% for j in all_position %}
                                        <tr style="text-align: center;">
                                            <td style="vertical-align: middle;">{{ forloop.counter }}</td>
                                            <td style="vertical-align: middle;">{{ j.name }}</td>
                                            <td style="vertical-align: middle;">{{ j.get_role_display }}</td>
                                            <td style="vertical-align: middle;text-align: right;">
                                                <a onclick="ChangRole({{ j.id }})" title="编辑" style="color: #007bff;">
                                                    <i class="fas fa-edit"> 编辑</i>
                                                </a>
                                                丨
                                                <a onclick="addNewRole('del',{{ j.id }})" title="删除" style="color: red;">
                                                    <i class="fas fa-times"> 删除</i>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% block custom_js %}
<script type="text/javascript">
    // ajax提交
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    //添加新角色
    function addNewRole(type_,id_){
        $.ajax({
            url: '{% url 'login:new_position' %}',
            type: 'POST',
            data: {
                'type': type_,
                'new_position': $("#new_position").val(),
                'position_role': $("#position_role").val(),
                // 删除操作用到的
                'position_id': id_,
            },
            //请求成功后执行提醒
            success: function (data) {
                layui.use('layer',function () {
                    var layer=layui.layer;
                    layer.msg(data.info, function(){
                        //刷新页面
                        window.location.reload()
                    });
                })
            }
        })
    }
    //弹窗修改
    function ChangRole(id_){
        layui.use('layer', function () {
            var layer=layui.layer;
            layer.open({
                type: 2,   //1是静态内容层，2是iframe层，可用连接
                area: ['600px', '400px'],
                title: '修改角色名称',
                maxmin: true,
                content:"{% url 'login:new_position' %}" + '?id=' + id_,
                end: function () {
                    location.reload() //弹窗完成后，重载父页面
                }
            })
        })
    }
</script>
{% endblock %}
{% endblock %}
